function cate_par_top10() {
    showTableAndEcharts();
    $.ajax({
        url: "catParTop10",
        method: "POST",
        success: function (data) {

            var jsonArr = JSON.parse(data);

            cate_par_top10_table(jsonArr);
            cate_par_top10_echart(jsonArr);
        }
    });

}


function cate_par_top10_table(jsonArr) {
    $("#tip").html("<h3>热门类目销量top10表格</h3>");
    $("#echart-tip").html("<h3>热门类目销量top10图表</h3>");

    //重置表头
    $("#head-tr").empty();
    //重新添加表头
    $("#head-tr").append("<th>ID</th><th>类目ID</th><th>类目名</th><th>销量</th>");

    //重置表的数据
    $("tbody").empty();

    $.each(jsonArr, function (index, proHotShopTop10) {
        if (index % 2 == 0) {
            $("tbody").append("<tr class='active'><td>"+proHotShopTop10.id+"</td><td>"+proHotShopTop10.cid+"</td><td>"+proHotShopTop10.cname+
                "</td><td>"+proHotShopTop10.count+"</td></tr>")
        } else {
            $("tbody").append("<tr class='info'><td>"+proHotShopTop10.id+"</td><td>"+proHotShopTop10.cid+"</td><td>"+proHotShopTop10.cname+
                "</td><td>"+proHotShopTop10.count+"</td></tr>")
        }
    });

    $("tbody tr").on("mouseenter", this, function() {
        color = $(this).attr("class");
        $(this).removeClass(color);
        $(this).addClass("success");
    });
    $("tbody tr").on("mouseleave", this, function() {
        $(this).removeClass("success");
        $(this).addClass(color);
    });
}

function cate_par_top10_echart(jsonArr) {

    $("#dataEcharts div:gt(0)").remove();
    $("#dataEcharts").append('<div id="main" style="height: 600px; width: 1000px"></div>');

    var x_data = [];
    var y_data = [];

    $.each(jsonArr, function (index, cateParTop10) {
        x_data.push(cateParTop10.cname);
        y_data.push(cateParTop10.count);
    });

    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        dataZoom: [
            {
                type: 'inside'
            },
            {
                type: 'slider'
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'category',
            data: x_data,
            name: "类目名"
        },
        yAxis: {
            type: 'value',
            name: "销量"
        },
        series: [
            {
                data: y_data,
                type: 'bar'
            }
        ]
    };

    myChart.setOption(option);

}